<template>
	<view>
		<view class="header-title" :style="{paddingTop:statuHeight+'px'}">专题区</view>
		<view class="img-list-box">
			<view class="theme-imng-box" v-for="(item,index) in imgList" :key="item.id">
				<image :src="item.url" class="img" mode="aspectFill"></image>
				<view class="theme-text-box">
					<view class="square">
						<view class="finally">{{item.name}}</view>
					</view>
					<view class="theme-text">{{item.text}}</view>
				</view>
			</view>
		</view>
		<tabber :tabIndex="3"></tabber>
	</view>
</template>

<script>
	import tabber from '@/components/tabbar.vue'
	export default {
		components:{tabber},
		data() {
			return {
				imgList: [
					{ id: 1, name: "热门榜", text: "这是一个专题热门榜类型", url: "../../static/special/special_a.jpg"},
					{ id: 2, name: "飙升榜", text: "这是一个专题飙升榜类型", url: "../../static/special/special_b.jpg"},
					{ id: 3, name: "热搜榜", text: "这是一个专题热搜榜类型", url: "../../static/special/special_c.jpg"}
				],
				statuHeight: uni.getSystemInfoSync().statusBarHeight,
			};
		},
		onShow() {
		
		},
	}
</script>

<style lang="scss" scoped>
	.header-title{
		padding-bottom: 20rpx;
		background-color: #5B2177;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
	.img-list-box{
		padding: 37rpx 31rpx 0 31rpx;
		.theme-imng-box{
			wwidth: 687rpx;
			height: 267rpx;
			// opacity: 0.65;
			border-radius: 10rpx;
			margin-bottom: 45rpx;
			position: relative;
			.img{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
			.theme-text-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				.square{
					width: 280rpx;
					height: 73rpx;
					border: 1px solid #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					.finally{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 264rpx;
						height: 59rpx;
						border: 1px solid #FFFFFF;
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
				.theme-text{
					margin-top: 26rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color:#FDFDFE;
				}
			}
		}
	}
	
</style>
